import { useDesignSettingStore } from '@/store/modules/designSetting';
import { reactive, ref, toRefs } from 'vue';
import setting from '@/settings/designSetting';
import { useRouter } from 'vue-router';

export function useLangHooks() {
  const useDesignSetting = useDesignSettingStore();

  const router = useRouter();

  const { language } = useDesignSetting;

  const state = reactive({
    language,
    languageOptions: setting.languageOptions,
  });

  function getLangText(lang) {
    return setting.languageOptions.find((item) => {
      return item.value === lang;
    }).label;
  }
  const languageText = ref(getLangText(language));

  function changeLangFun(callback) {
    useDesignSetting.setSystemLanguage(state.language);
    // locale.value = state.language;
    // languageText.value = getLangText(state.language);
    router.go(0);

    if (callback) {
      callback();
    }
  }

  return {
    ...toRefs(state),
    languageText,
    changeLangFun,
  };
}
